<template>
  <div style="margin-bottom:10px">
    <div class="search" style="text-align:center">
      <div>
        <h1 class="title">博客</h1>
        <!-- <el-select v-model="tagValue" clearable placeholder="请选择">
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select> -->
        <div class="searchbar">
          <el-input
            placeholder="请输入博客标题关键字"
            v-model="input3"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="search"
            ></el-button>
          </el-input>
        </div>
        <el-button
          class="order"
          type="primary"
          plain
          @click="orderChange(order)"
          >{{ order }}</el-button
        >
      </div>
    </div>
    <div class="blog-list" style="text-align:left">
      <List item-layout="vertical">
        <div
          @click="displayBlog(item.id)"
          v-for="item in blogs"
          :key="item.id"
          v-show="item.display == 1"
          class="blog-click-box"
        >
          <ListItem class="blog-box">
            <ListItemMeta :title="item.title" :description="item.time" />
            {{ item.sketch }}
            <template slot="action">
              <el-tag type="warning">{{ item.class }}</el-tag>
            </template>
            <template slot="extra">
              <img
                src="https://dev-file.iviewui.com/5wxHCQMUyrauMCGSVEYVxHR5JmvS7DpH/large"
                style="width: 280px"
              />
            </template>
          </ListItem>
        </div>
      </List>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :hide-on-single-page="true"
      :current-page.sync="currentPage"
      :page-size="6"
      layout="prev, pager, next, jumper"
      :total="totalNum"
      v-show="showPage"
    >
    </el-pagination>
  </div>
</template>

<style scoped>
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.title {
  display: inline-block;
  width: 300px;
  text-align: left;
  margin: 0;
  margin-left: 10px;
}

.searchbar {
  display: inline-block;
  width: 565px;
}

.order {
  display: inline-block;
}

.blog-list {
  text-align: left;
}

.blog-click-box:hover {
  cursor: pointer;
}

.blog-box {
  background: rgba(255, 255, 255, 0.664);
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
}
</style>

<script>
export default {
  name: "BlogSearchbar",
  data() {
    return {
      showPage: true,
      input3: "",
      options: ["德语", "计算机", "日常"],
      tagValue: "",
      order: "按时间升序",
      timeOrder: 1, //1按时间升序，0：按时间降序
      currentPage: 1,
      totalNum: 16,
      blogs: [
      ]
    };
  },
  created: function() {
    let that = this;
    let qs = this.$qs;
    this.$http({
      url: "servlet/blog",
      method: "post",
      transformRequest: [
        function(data) {
          //在请求之前对data传参进行格式转换
          data = qs.stringify(data);
          return data;
        }
      ],
      data: {
        funcType: 12
      },
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
      }
    }).then(
      function(res) {
        console.log("show tag success");
        that.options = res.data.classList;
        that.options.push("所有");
        that.tagValue = "所有";
        that.currentPage = 1;
      },
      function(res) {
        console.log(res);
        console.log("啊呀，MBlog-getClass出错啦");
      }
    );

    that = this;
    let currentPage = this.currentPage;
    let timeOrder = this.timeOrder;
    this.$http({
      url: "servlet/blog",
      method: "post",
      transformRequest: [
        function(data) {
          //在请求之前对data传参进行格式转换
          data = qs.stringify(data);
          return data;
        }
      ],
      data: {
        funcType: 1,
        currentPage: currentPage,
        timeOrder: timeOrder
      },
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
      }
    }).then(
      function(res) {
        console.log("getpPageBlogs");
        that.blogs = res.data.blogs;
        that.totalNum = res.data.totalNum;
        console.log(res.data.classes);
        for (var i = 0; i < res.data.classes.length; i++) {
          that.blogs[i].class = res.data.classes[i];
        }
        console.log(that.blogs);
      },
      function(res) {
        console.log(res);
        console.log("啊呀，getPageBlogs出错啦");
      }
    );
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      //向后端传参数currentPage
      let currentPage = this.currentPage;
      let timeOrder = this.timeOrder;
      let that = this;
      let qs = this.$qs;
      this.$http({
        url: "servlet/blog",
        method: "post",
        transformRequest: [
          function(data) {
            //在请求之前对data传参进行格式转换
            data = qs.stringify(data);
            return data;
          }
        ],
        data: {
          funcType: 1,
          currentPage: currentPage,
          timeOrder: timeOrder
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }
      }).then(
        function(res) {
          console.log("getpPageBlogs");
          that.blogs = res.data.blogs;
          for (var i = 0; i < res.data.classes.length; i++) {
            that.blogs[i].class = res.data.classes[i];
          }
          that.totalNum = res.data.totalNum;
        },
        function(res) {
          console.log(res);
          console.log("啊呀，getPageBlogs出错啦");
        }
      );
    },
    orderChange(val) {
      if (val == "按时间升序") {
        this.order = "按时间降序";
        this.timeOrder = 0;
        // 更新data降序的列表
      } else {
        this.order = "按时间升序";
        this.timeOrder = 1;
        //更新data升序的列表
      }

      this.handleCurrentChange(this.currentPage);
    },
    displayBlog(id) {
      this.$router.push({ path: "/blogDisplay", query: { id: id } });
    },

    search() {
      this.currentPage = 1;
      let currentPage = this.currentPage;
      console.log(this.input3);
      if (this.input3 == "") {
        this.showPage = true;
        this.handleCurrentChange(this.currentPage);
        console.log(1);
      } else {
        this.showPage = false;
        let timeOrder = this.timeOrder;
        let that = this;
        let qs = this.$qs;
        this.$http({
          url: "servlet/blog",
          method: "post",
          transformRequest: [
            function(data) {
              //在请求之前对data传参进行格式转换
              data = qs.stringify(data);
              return data;
            }
          ],
          data: {
            funcType: 17,
            timeOrder: timeOrder,
            input: that.input3
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
          }
        }).then(
          function(res) {
            console.log(res.data.blogs);
            that.blogs = res.data.blogs;
            for (var i = 0; i < res.data.classes.length; i++) {
              that.blogs[i].class = res.data.classes[i];
            }
            that.input3 = "";
          },
          function(res) {
            console.log(res);
            console.log("啊呀，getPageBlogs出错啦");
          }
        );
      }
    },

    tagChose() {}
  }
};
</script>